<template>
  <div class="export-box" style="width: 565pt">
    <p style="text-align: center">
      <span
        style="
          font-family: 宋体;
          font-weight: bold;
          color: rgb(0, 0, 0);
          min-height: 16pt;
          font-size: 16pt;
        "
        >深水汴北配套管网运维日报表</span
      >
    </p>
    <table
      style="width: 565pt; border-collapse: collapse; border: 1px solid #dddddd"
    >
      <colgroup>
        <col style="width: 89.65pt" />
        <col style="width: 44.05pt" />
        <col style="width: 121.5pt" />
        <col style="width: 103.85pt" />
        <col style="width: 73.3pt" />
        <col style="width: 106.3pt" />
      </colgroup>
      <!-- 头部 -->
      <tr
        v-for="(item, index) in data.head"
        :key="index"
        style="border: 1px solid #cccccc; height: 25.5pt"
      >
        <td
          v-for="(item2, index) in item"
          :key="index"
          style="padding-left: 5.4pt; border: 1px solid #cccccc"
          :style="{ width: item2.width }"
          :colspan="index % 2 == 0 ? 2 : 1"
        >
          <span
            style="
              font-weight: bold;
              color: #595959;
              font-size: 9pt;
              margin-right: 3pt;
            "
          >
            {{ item2.title }}</span
          >
          <span style="color: #595959; font-size: 9pt">
            {{ item2.label }}
          </span>
        </td>
      </tr>
      <!-- 到岗人员 -->
      <tr style="border: 1px solid #cccccc; height: 25.5pt">
        <td colspan="6" style="padding-left: 5.4pt; border: 1px solid #cccccc">
          <span
            style="
              font-weight: bold;
              color: #595959;
              font-size: 9pt;
              margin-right: 3pt;
            "
          >
            到岗人员：</span
          >

          <span
            v-for="(item, index) in data.personnel"
            :key="index"
            style="color: #595959; font-size: 9pt"
          >
            <span v-if="index !== 0"> &nbsp;</span>
            <span>{{ item.title }}</span>
            <span>
              {{ item.label }}
            </span>
          </span>
        </td>
      </tr>
      <!-- 标准化执行情况 -->
      <tr style="border: 1px solid #cccccc; height: 25.5pt">
        <td colspan="6" style="padding-left: 5.4pt; border: 1px solid #cccccc">
          <span
            style="
              font-weight: bold;
              color: #595959;
              font-size: 9pt;
              margin-right: 3pt;
            "
          >
            标准化执行情况：</span
          >
          <span
            v-for="(item, index) in executionList"
            :key="index"
            style="color: #595959; font-size: 9pt"
          >
            <span v-if="index !== 0">&nbsp;&nbsp;&nbsp;</span>
            <span>{{ data.execution == index ? "√" : "□" }}</span>
            <span>
              {{ item }}
            </span>
          </span>
        </td>
      </tr>
      <!-- 巡检记录 -->
      <tr style="border: 1px solid #cccccc; height: 36pt">
        <td
          colspan="6"
          style="
            text-align: center;
            border: 1px solid #cccccc;
            background-color: #f1f1f1;
            color: rgb(89, 89, 89);
            font-size: 14pt;
            letter-spacing: 1pt;
          "
        >
          巡检记录
        </td>
      </tr>
      <tr>
        <td
          colspan="6"
          style="
            text-align: center;
            border: 1px solid #cccccc;
            background-color: #f1f1f1;
            color: rgb(89, 89, 89);
            font-size: 14pt;
            letter-spacing: 1pt;
          "
        >
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2021%2F04%2F0713%2F219519055_1_20210407012803425&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716081866&t=af941e4f60f743e1081f7cda8fcfb299"
            width="565pt"
            height="200pt"
          />
        </td>
      </tr>
    </table>

    <div class="btn">
      <el-progress :percentage="50" />
      <el-progress :percentage="100" :format="format" />
      <el-progress :percentage="100" status="success" />
      <el-progress :percentage="100" status="warning" />
      <el-progress :percentage="50" status="exception" />

      <el-steps style="max-width: 600px" :active="0" finish-status="success">
        <el-step title="Step 1" />
        <el-step title="Step 2" />
        <el-step title="Step 3" />
      </el-steps>
    </div>

    <span><br clear="all" style="page-break-before: always" /> </span>
    分页

    <span><br clear="all" style="page-break-before: always" /> </span>
    分页
  </div>

  <button @click="handleExport">导出</button>
</template>

<script setup>
import { onMounted, nextTick } from "vue";
import handleExportWord from "./lib/main.js";

// 标准化执行情况
const executionList = ["优秀", "良好", "中等", "差"];

// 巡检记录
const data = {
  head: [
    [
      { title: "作业日期：", label: "2024年01月25日", width: "150pt" },
      { title: "填表人：", label: "吴宇、白阳", width: "110pt" },
      {
        title: "运维单位：",
        label: "安徽中益达管道疏通有限公司",
        width: "200pt",
      },
      { title: "天气：", label: "多云（24°C）", width: "120pt" },
    ],
    [
      {
        title: "现场负责人：",
        label: "吴宇",
        width: "150pt",
      },
      {
        title: "手机号码：",
        label: "13112345678",
        width: "110pt",
      },
      {
        title: "项目负责人：",
        label: "吴宇",
        width: "205pt",
      },
      {
        title: "手机号码：",
        label: "13198765432",
        width: "120pt",
      },
    ],
  ],
  personnel: [
    {
      title: "安全员:",
      label: "1人",
    },
    {
      title: "监护人员:",
      label: "1人",
    },
    {
      title: "施工人员:",
      label: "3人",
    },
    {
      title: "巡查人员:",
      label: "2人",
    },
    {
      title: "潜水员:",
      label: "1人",
    },
    {
      title: "有限空间作业人员:",
      label: "1人",
    },
  ],
  execution: 1,
};

const handleExport = () => {
  handleExportWord({
    dom: ".export-box",
    fileName: "托尔斯泰222",
    drawCanvas: [".btn"],
    callBack: (res) => {
      console.log(res); //文档流
    },
  });
};
</script>
